<template>
  <view class="width100 d-clo d-jc-centen margin-top-30">

    <navigator url="personal">
      <view class="width90 d-row d-jc-between d-ai-centen margin-center height200 head">
        <view class="d-clo d-jc-between height120">
          <h2>{{ userInfo.data.account }}</h2>
          <p class="gray4">学累了,记得吃饭哟~</p>
        </view>

      </view>
    </navigator>

    <view @click="openPopup">
      <view class="width90 height140 line-height140 d-row d-jc-between d-ai-start margin-center border-bottom-2 ">
        <view class="change">
          <image src="@/static/切换.png" style="width:20px;height:20px;margin-right:10px"></image>
          <text class="qiehuanxiaoqu">切换校区</text>
        </view>
        <view class="gray3">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
    </view>


    <navigator url="about">
      <view class="width90 height140 line-height140 d-row d-jc-between d-ai-start margin-center border-bottom-2 ">
        <view>
          <u-icon name="order" label="关于我们" size="36" label-size="36" color="#007AFF" margin-left="20"></u-icon>
        </view>
        <view class="gray3">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
    </navigator>

    <view @click="showConfirmLogout">
      <view class="width90 height140 line-height140 d-row d-jc-between d-ai-start margin-center border-bottom-2 ">
        <view class="change">
          <image src="@/static/退出登录.png" style="width:20px;height:20px;margin-right:10px"></image>
          <text class="qiehuanxiaoqu">退出登录</text>
        </view>
        <view class="gray3">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
    </view>


    <view v-if="showPopup" class="popup-overlay">
      <view class="popup-content">
        <button
            :class="{ 'active': selectedCampus === '101' }"
            @click="selectCampus('101')"
        >
          华北水利水电大学（龙子湖校区）
        </button>
        <button
            :class="{ 'active': selectedCampus === '102' }"
            @click="selectCampus('102')"
        >
          华北水利水电大学（花园校区）
        </button>
        <button
            :class="{ 'active': selectedCampus === '200' }"
            @click="selectCampus('200')"
        >
          华北水利水电大学（江淮校区）
        </button>


        <button class="popup-button" @click="closePopup">关闭</button>
        <button class="popup-button" @click="handleConfirm">确认</button>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  components: {},
  data() {
    return {
      showPopup: false,
      selectedCampus: localStorage.getItem('selectedCampus'),
      userInfo: {}
    }
  },
  methods: {
    openPopup() {
      this.showPopup = true;
    },
    closePopup() {
      this.showPopup = false;
    },
    selectCampus(campusCode) {
      this.selectedCampus = campusCode;
    },
    handleConfirm() {
      if (this.selectedCampus) {
        localStorage.setItem('selectedCampus', this.selectedCampus);
        this.closePopup();
      } else {
        uni.showToast({title: '请选择一个校区', icon: 'none'});
      }
    },
    showConfirmLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            this.logout();
          }
        }
      });
    },
    logout() {
      // 清空用户数据
      uni.removeStorageSync('userInfo');
      // 跳转登录页并关闭当前页
      uni.reLaunch({
        url: '/pages/login/login'
      });
    }
  },
  mounted() {
    // 安全获取 userInfo
    const userInfoStr = localStorage.getItem('userInfo');
    if (userInfoStr) {
      try {
        this.userInfo = JSON.parse(userInfoStr);
        console.log('userInfo:', this.userInfo.data);
      } catch (e) {
        console.error('解析 userInfo 失败:', e);
        this.userInfo = {};
      }
    }
  }
}
</script>

<style>
.head {
  border: 1rpx solid #c6c6c6;
  border-radius: 10rpx;
  padding: 30rpx;
}

.head-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}

.popup-content {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 按钮间距 */
}

.popup-content button {
  padding: 10px;
  width: 100%;
  border: none;
  background-color: #f0f0f0;
  border-radius: 5px;
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}

.popup-button {
  padding: 8px 16px;
  font-size: 14px;
  margin-right: 10px;
}

.popup-content button.active {
  background-color: green; /* 激活状态下背景色为绿色 */
  color: white; /* 文字颜色为白色 */
}

.qiehuan {
  width: 20px;
  height: 20px;
}

.qiehuanxiaoqu {
  font-size: 20px;
  label-size: 36;
  margin-left: 0px;
  color: #656266;

}

.change {
  display: flex;
  //gap: 4px;
  align-items: center;
}
</style>
